<template>
    <div class="whiteTargetContainer">
        <!-- 省份选项 -->
        <div class="province item">
        <el-input v-model="searchValue.provinvce" placeholder="请输入搜索" prefix-icon="el-icon-search" clearable
            class="input" />
            <el-checkbox :indeterminate="isIndeterminate.provinvce" v-model="checkAll.provinvce" @change="handleCheckAllChange('provinvce')">全选</el-checkbox>
            <el-checkbox-group v-model="checked.provinvce" @change="handleCheckedChange('provinvce')">
                <el-checkbox v-for="(item, index) in provinceOptions" :label="item.provinceCode" :key="index+'_'+item.provinceCode">{{item.provinceName}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 城市选项 -->
        <div class="city item">
        <el-input v-model="searchValue.city" placeholder="请输入搜索" prefix-icon="el-icon-search" clearable
            class="input" />
            <el-checkbox :indeterminate="isIndeterminate.city" v-model="checkAll.city" @change="handleCheckAllChange('city')">全选</el-checkbox>
            <el-checkbox-group v-model="checked.city" @change="handleCheckedChange('city')">
                <el-checkbox v-for="(item, index) in cityOptions" :label="item.cityCode" :key="index +'_' + item.cityCode">{{item.cityName}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 经销店选项 -->
        <div class="dealer item">
            <el-input v-model="searchValue.dealer" placeholder="请输入搜索" prefix-icon="el-icon-search" clearable class="input" />
            <el-checkbox :indeterminate="isIndeterminate.dealer" v-model="checkAll.dealer" @change="handleCheckAllChange('dealer')">全选</el-checkbox>
            <el-checkbox-group v-model="checked.dealer" @change="handleCheckedChange('dealer')">
                <el-checkbox v-for="(item, index) in dealerOptions" :label="item.dealerCode" :key="index + '_' + item.dealerCode">{{item.dealerName}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 已选择经销店 -->
        <div class="selectedDealer item">
            <el-input v-model="searchValue.selecedDelear" placeholder="请输入搜索" prefix-icon="el-icon-search" clearable
                class="input"/>
            <div class="selectedText">
                <div class="text">已选择经销店{{ checked.dealer.length }}个</div>
                <div class="icon" @click="handleRemoveAll"><i class="el-icon-delete"></i></div>
            </div>
        <div class="selectedItem" v-for="(item, index) in seletedDealerOptions" :key="index + '_' + item.dealerCode">
            <div class="text">{{ item.dealerName }}</div>
            <div class="icon" @click="handelRemoveItem(item.dealerCode, index)"><i class="el-icon-close"></i></div>
        </div>
        </div>
    
    </div>
</template>

<script>
export default {
  name: 'whiteTargetSelect',
  props: {
    provinves: {
      type: Array,
      default() {
        return []
      }
    },
    cities: {
      type: Array,
      default() {
        return []
      }
    },
    dealeres: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      searchValue: {
        provinvce: '',
        city: '',
        dealer: '',
        selecedDelear: ''
      },
      isIndeterminate: {
        provinvce: false,
        city: false,
        dealer: false
      },
      checkAll: {
        provinvce: false,
        city: false,
        dealer: false
      },
      checked: {
        provinvce: [],
        city: [],
        dealer: [],
        selecedDelear: []
      }
    }
  },
  computed: {
    provinceOptions() {
        // 省份模糊搜索
        const searchValue = this.searchValue.provinvce
        const province = []
        if (searchValue) {
            this.provinves.forEach(item => {
                if(item.provinceName.includes(searchValue)){
                   province.push(item) 
                }
            })
          return province
        } else {
          return this.provinves
        }
    },
    // 城市复选框选项
    /**
     * 1、如果没有选择省份 那么城市就展示当前展示省份下的城市
     * 2、如果选择了省份那么就展示所选省份下的城市
     * 3、如果有模糊搜索就展示符合搜索结果的城市
     */
    cityOptions() {
        const selectedProvince = this.checked.provinvce
        const searchValue = this.searchValue.city
        // 城市选项模糊搜索
        if (searchValue) {
            const allCity = []
            this.cities.forEach(item => {
                if(item.cityName.includes(searchValue)){
                    allCity.push(item) 
                }
            })
            return allCity
        }
        // 城市选项根据所选省份变化
        if (selectedProvince.length) {
            const cities = []
            this.provinceOptions.forEach(item => {
                if(selectedProvince.includes(item.provinceCode)) {
                    cities.push(...item.cityDtoList)
                }
            });
            return cities
        }
       return this.cities
    },
    // 经销店复选框选项
    dealerOptions() {
        const searchValue = this.searchValue.dealer
        const selectedCity = this.checked.city
        const selectedProvince = this.checked.provinvce
        if (searchValue) {
            const allDealer = []
            this.dealeres.forEach(item => {
                if(item.dealerName.includes(searchValue) || item.dealerCode.includes(searchValue)){
                    allDealer.push(item) 
                }
            })
            return allDealer
        }
        // 只选择了省份
        if (selectedProvince.length && !selectedCity.length) {
            const allDealer = []
            this.dealeres.forEach(item => {
                if(selectedProvince.includes(item.provinceCode)) {
                    allDealer.push(item)
                }
            });
            return allDealer
        }
        if (selectedCity.length) {
            const allDealer = []
            this.dealeres.forEach(item => {
                if(selectedCity.includes(item.cityCode)) {
                allDealer.push(item)
                }
            });
            return allDealer
        }
       
        return this.dealeres
    },
    seletedDealerOptions() {
        const searchValue = this.searchValue.selecedDelear
        if (searchValue) {
            const selectedDelear = []
            this.checked.selecedDelear.forEach(item => {
                if(item.dealerName.includes(searchValue)){
                    selectedDelear.push(item) 
                }
            })
            return selectedDelear
        } else {
            
            return this.checked.selecedDelear
        }
    }
  },
  watch: {
    'dealerOptions.length': function(newLength, oldLength) {
      this.checkAll.dealer = newLength === this.checked.dealer.length
      this.isIndeterminate.dealer = !!this.checked.dealer.length
    },
    'cityOptions.length': function(newLength, oldLength) {
      this.checkAll.city = newLength === this.checked.city.length
      this.isIndeterminate.city = !!this.checked.city.length
    }
  },
  methods: {
    // 全选
    handleCheckAllChange(options) {
        const isCheckAll = this.checkAll[options]
        if (isCheckAll) {
            switch (options) {
                case 'provinvce':
                    this.checked[options] = this.provinves.map(item => (
                        item.provinceCode
                    ))
                break;
                case 'city':
                    this.checked[options] = this.cityOptions.map(item => (
                        item.cityCode
                    ))
                break;
                case 'dealer':
                    this.checked[options] = this.dealerOptions.map(item => (
                        item.dealerCode
                    ))
                    this.checked.selecedDelear = this.dealerOptions
                    this.$emit('select', this.checked.selecedDelear)
                break;
            }
            this.isIndeterminate[options] = false
        } else {
           this.checked[options] = []
           if (options === 'dealer') {
               this.checked.selecedDelear = []
               this.$emit('select', this.checked.selecedDelear)
           }
        }
    },
    // 单个选择
    handleCheckedChange(options) {
        switch (options) {
            case 'provinvce':
                this.checkAll[options]  = this.checked[options].length === this.provinves.length
            break;
            case 'city':
                this.checkAll[options]  = this.checked[options].length === this.cityOptions.length
            break;
            case 'dealer':
                this.checkAll[options]  = this.checked[options].length === this.dealerOptions.length
                const seleted = this.checked[options]
                let setetedText = []
                if (seleted.length) {
                  this.dealeres.forEach(item => {
                      if (seleted.includes(item.dealerCode)) {
                        setetedText.push({dealerCode: item.dealerCode, dealerName: item. dealerName})
                      }
                  }) 
                } else {
                   setetedText = []
                }
                this.checked.selecedDelear = setetedText
                this.$emit('select', this.checked.selecedDelear)
            break;
        }
        if (this.checkAll[options]) {
            this.isIndeterminate[options] = false
        } else {
            this.isIndeterminate[options] = !!this.checked[options].length
        }
    },
    // 删除所有已选中的
    handleRemoveAll() {
        this.checked.dealer = []
        this.checked.selecedDelear = []
        this.checkAll.dealer = false
        this.isIndeterminate.dealer = false
        this.$emit('select', this.checked.selecedDelear)
    },
    // 删除单个已选中的
    handelRemoveItem(dealerCode, index) {
        this.checked.dealer = this.checked.dealer.filter(item => item !=dealerCode)
        this.checked.selecedDelear.splice(index, 1)
        this.$emit('select', this.checked.selecedDelear)
    },
    // 重置下拉框里面的选择
    reset() {
        this.resetSearch()
        for (const key in this.isIndeterminate) {
            this.isIndeterminate[key] = false
        }
        for (const key in this.checkAll) {
            this.checkAll[key] = false
        }
        for (const key in this.checked) {
            this.checked[key] = []
        }
    },
    resetSearch() {
        for (const key in this.searchValue) {
            this.searchValue[key] = ''
        }
        this.checked.province = false
        this.checked.city = false
    },
    // 移除已选择的tag
    setSelectDealer(val) {
        this.checked.dealer = this.checked.dealer.filter(item => item !=val.dealerCode )
        this.checked.selecedDelear = this.checked.selecedDelear.filter(item => item.dealerCode !=val.dealerCode )
    },
    // 编辑时候 初始化经销店
    setEditDealer(val){
        const dealer = [], selecedDelear = []
        val.forEach(item => {
            dealer.push(item.dealerCode)
            selecedDelear.push({ dealerCode: item.dealerCode,dealerName: item.dealerName })
        })
        this.checked.dealer = dealer
        this.checked.selecedDelear = selecedDelear
    }
  }
}
</script>

<style lang="scss" scoped>
.whiteTargetContainer{
   width: 720px;
   display: flex;
   box-sizing: border-box;
   padding: 0 10px;
   font-size: 14px;
   .el-checkbox{
       line-height: 25px;
       display: block;
   }
   .item{
    width: 180px;
    box-sizing: border-box;
    margin-left: 10px;
    // overflow: hidden;
    .input{
        width: 150px;
        margin-bottom: 10px;
    }
    .selectedText{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        line-height: 25px;
    }
   }
   .selectedItem{
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
       line-height: 25px;
   }
 }
</style>
